<template>
  <view class="container">
    <view class="top center">
      <image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/user/logo1.png" class="logo" mode="widthFix"></image>
    </view>
    <view class="info">
      <view class="title">欢迎光临富侨汇，会员尊享</view>
      <view class="img-box space-between">
        <view class="box">
          <image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/user/zk.png" class="img"></image>
          <view class="text">会员专享折扣</view>
          <view class="text1">会员价格更低</view>
        </view>
        <view class="box">
          <image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/user/ty.png" class="img"></image>
          <view class="text">全国会员通用</view>
          <view class="text1">全国2000+门店</view>
        </view>
        <view class="box">
          <image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/user/tq.png" class="img"></image>
          <view class="text">会员专属特权</view>
          <view class="text1">专属精品水果</view>
        </view>
      </view>
      <view v-if="!isCheck" class="center btn" @click="login">一键登录</view>
      <button v-else class="center btn" open-type="getPhoneNumber" @getphonenumber="e => getPhoneNumber(e)">
        一键登录
      </button>
      <view class="xy-box">
        <checkbox-group @change="onCheckboxChange">
          <checkbox :checked="isCheck" :value="true" @change="onCheckboxChange" />
        </checkbox-group>
        <view class="xy-text">
          我已阅读并同意<text class="blue" @click="goRichText(1)">《富侨汇用户协议》</text
          ><text class="blue" @click="goRichText(2)">《隐私协议》</text> 及<text class="blue" @click="goRichText(3)"
            >《支付协议》
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getOpenid, getPhone, login } from "../../api/active"
export default {
  data() {
    return {
      isCheck: false,
      openid: "",
      unionid: "",
      name: "",
      avatarUrl: "",
      memberId: uni.getStorageSync("memberId") || ""
    }
  },
  onLoad(e) {
    this.getCode()
    this.name = e.name || uni.getStorageSync("name") || ""
    this.avatarUrl = e.avatarUrl || uni.getStorageSync("avatar") || ""
  },
  methods: {
    getCode() {
      const that = this
      uni.login({
        success(e) {
          console.log(e)
          if (e.errMsg === "login:ok") {
            getOpenid({
              code: e.code,
              appid: "wxd7029c6a261ef094"
            }).then(res => {
              const data = JSON.parse(res.data)
              that.openid = data.openid
              that.unionid = data.unionid
              uni.setStorageSync("openid", data.openid)
              uni.setStorageSync("unionid", data.unionid)
            })
          } else {
            uni.showToast({
              icon: "none",
              title: "登录失败，请重新进入小程序"
            })
          }
        }
      })
    },
    async getPhoneNumber(e) {
      const { detail } = e
      if (detail.errMsg === "getPhoneNumber:ok") {
        const { code } = detail
        const phoneData = await getPhone({
          code: code,
          appid: "wxd7029c6a261ef094"
        })
        const data = JSON.parse(phoneData.data)
        login({
          openId: this.openid,
          appid: "wxd7029c6a261ef094",
          unionId: this.unionid,
          mobile: data.phone_info.phoneNumber,
          avatar: this.avatarUrl,
          name: this.name
        }).then(res => {
          uni.setStorageSync("token", res.data.token)
          uni.setStorageSync("userId", res.data.user.id)
          uni.showToast({
            icon: "none",
            title: "登录成功",
            duration: 1500
          })
          setTimeout(() => {
            if (this.memberId) {
              uni.redirectTo({
                url: "/pages/vip/vip"
              })
            } else {
              uni.reLaunch({
                url: "../index/index"
              })
            }
          }, 1500)
        })
      } else if (detail.errMsg === "getPhoneNumber:fail user deny") {
        uni.showToast({
          icon: "none",
          title: "用户拒绝授权"
        })
      }
    },
    goRichText(t) {
      uni.navigateTo({
        url: "../richtext/richtext?title=" + t
      })
    },
    onCheckboxChange(event) {
      this.isCheck = event.detail.value.length > 0
    },
    login() {
      console.log(this.openid)
      console.log(this.unionid)
      uni.showToast({
        icon: "none",
        title: "请阅读并勾选协议"
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  min-height: 100vh;
  background: #fff;
}

.top {
  width: 100vw;
  height: 478rpx;
  background: linear-gradient(0deg, #164fa0, #4377c1);

  .logo {
    width: 247rpx;
  }
}

.info {
  width: 100vw;
  height: 500rpx;
  border-top-left-radius: 40rpx;
  border-top-right-radius: 40rpx;
  margin-top: -60rpx;
  background: #fff;
  padding: 60rpx 45rpx 0 45rpx;
}

.title {
  font-weight: 800;
  font-size: 40rpx;
  color: #333333;
}

.img-box {
  margin-top: 56rpx;
  gap: 10rpx;

  .box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .img {
    width: 210rpx;
    height: 170rpx;
  }

  .text {
    font-weight: 800;
    font-size: 28rpx;
    color: #333333;
    margin-top: -20rpx;
  }

  .text1 {
    font-weight: 400;
    font-size: 24rpx;
    color: #999999;
    margin-top: 10rpx;
  }
}

.btn {
  margin-top: 96rpx;
  width: 100%;
  height: 100rpx;
  background: #005097;
  border-radius: 50rpx;
  font-weight: 500;
  font-size: 30rpx;
  color: #ffffff;
}

.xy-box {
  margin-top: 45rpx;
  display: flex;
  align-items: flex-start;
  gap: 15rpx;

  .xy-text {
    font-weight: 500;
    font-size: 28rpx;
    color: #333333;
  }

  .blue {
    color: #005097;
  }
}
</style>
